<template>
  <div class="view-container">
    <div
      class="view-content"
      :style="{
        'border-width': widget.borderWidth + 'px',
        'border-style': widget.borderStyle,
        'border-color': widget.borderColor,
        'border-radius': widget.borderRadius + 'px',
        'background-color': widget.backgroundColor,
      }"
    ></div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { useEleStore } from '@/store/modules/coms'
  const props = defineProps<{
    index: number
  }>()
  const Store = useEleStore()
  const widget = computed(() => {
    return Store.getWidgets[props.index]
  })
</script>

<style lang="scss" scoped>
  .view-container {
    width: 100%;
    height: 100%;

    .view-content {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
  }
</style>
